<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="module">

    // 直接在模块化语法中使用await => 前提:最外层
    // var p1 = await getNumAsync(1, 2000);  // Promise实例 2s => {<fulfilled>:1}  
    // console.log(p1);
    // var p2 = await getNumAsync(2, 1000);  // Promise实例 1s => {<fulfilled>:2}
    // console.log(p2);
    // var p3 = await getNumAsync(3, 3000);  // Promise实例 3s => {<fulfilled>:3}
    // console.log(p3);


    (async function(){
        var p1 = await getNumAsync(1, 2000);  // Promise实例 2s => {<fulfilled>:1}  
        console.log(p1);
        var p2 = await getNumAsync(2, 1000);  // Promise实例 1s => {<fulfilled>:2}
        console.log(p2);
        var p3 = await getNumAsync(3, 3000);  // Promise实例 3s => {<fulfilled>:3}
        console.log(p3);
    })();

    function getNumAsync(num, delay = 0, isFulfilled = true) {
        var p = new Promise(function (resolve, reject) {
            // 回调函数 -> 容器 -> 用来存放异步操作 (根据异步操作的结果改变状态)
            setTimeout(() => {
                isFulfilled ? resolve(num) : reject(num); // {<fulfilled>:1}
                // console.log(p);
            }, delay);
        })
        return p;  // {<pending>:undefined}
    }

</script>
</html>